<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title></title> 

</head>

<body class="no-skin">
	<div class="main-container" id="main-container">
		<script type="text/javascript">
				// 检查 class=main-container这个div层是不是相对窗口固定。
				try{ace.settings.check('main-container' , 'fixed')}catch(e){}
		</script>

		<div class="page-content">
			<!-- 页面内容开始 -->
			<div class="widget-main">

				<form class="form-horizontal" id="validation-form" method="post">
						<input type="hidden" name="obj.id" id="id" value="" />
					<div class="form-group">
						<label class="control-label col-xs-12 col-sm-3 no-padding-right"
							for="versionNo">普通输入框:</label>

						<div class="col-xs-12 col-sm-9">
							<div class="clearfix">
								<input type="text" name="obj.remark" id="remark"
									class="col-xs-12 col-sm-6" value="" />
							</div>
						</div>
					</div>

					<div class="form-group">
						<label class="control-label col-xs-12 col-sm-3 no-padding-right"
							for="os">下拉选择:</label>

						<div class="col-xs-12 col-sm-9">
							<div class="clearfix">
								<select name="obj.status" id="status" class="span3">
									<option value="1" >启用</option>
									<option value="0" >禁用</option>
								</select>
							</div>
						</div>
					</div>
 
					<div class="form-group">
						<label class="control-label col-xs-12 col-sm-3 no-padding-right"
							for="content">大框输入:</label>

						<div class="col-xs-12 col-sm-9">
							<div class="clearfix">
								<textarea rows="5" cols="50" name="content" id="content" style="resize:none" >我是没有持久化的，改我没用</textarea>
							</div>
						</div>
					</div>

					<div class="clearfix form-actions" align="center">
						<div class="col-md-offset-3 col-md-9">
							<button id="submit-btn" class="btn btn-info" type="submit"
								data-last="Finish">
								<i class="ace-icon fa fa-check bigger-110"></i> 提交
							</button>

							&nbsp; &nbsp; &nbsp;
							<button class="btn" type="reset">
								<i class="ace-icon fa fa-undo bigger-110"></i> 重置
							</button>
						</div>
					</div>

				</form>
			</div>
			<!-- /.widget-main -->
		</div>
		<!-- /.page-content -->
	</div>
	<!-- /.main-container -->
	

	<script src="/res/ace-1.3.3/assets/js/ace-extra.js"></script>
	<script src="/res/uploadify/jquery.uploadify.min.js" type="text/javascript"></script>
	<script type="text/javascript">
		
			jQuery(function($) {

				// 添加图片
				      $("#uploadicon").click(function () {
		                      //效验上传图片类型
		                      var ths=$('#fileField');
		                      if (ths.val().length <= 0) {
		                          alert("请上传图片");
		                          return false;
		                      } else if(!/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(ths.val())){
		                          alert("图片类型必须是.gif,jpeg,jpg,png中的一种");
		                          ths.val("");
		                          return false;
		                      }
		                      //效验成功调用异步上传函数
		                      ajaxFileUpload();
		                      return true;
              			})
   
		      /**
		       * ajaxFileUpload    JQuery异步上传插件
		       */
		       function ajaxFileUpload() {
		       	$.ajaxFileUpload
		       	({
		                      url: "/server/type/uploadimg", //用于文件上传的服务器端请求地址
		                      type: 'post',
		                      data: {"type":"icon"},
		                      secureuri: false, //是否需要安全协议，一般设置为false
		                      fileElementId: 'fileField', //文件上传域的ID
		                      dataType: 'json', //返回值类型 一般设置为json
		                      success: function (data, status)  //服务器成功响应处理函数
		                      {

		                                  // console.log(data);

		                                  var srcvalue = data.data.filePath;
		                                  console.log(srcvalue);
		                                  $("#img-thumbnail").attr('src',srcvalue); 
		                                  $("#textfield").val(srcvalue);

		                              },
		                      error: function (data, status, e)//服务器响应失败处理函数
		                      {
		                      	alert(e);
		                      }
		                  })
		       	return false;
		       }
				
				var $validation = true;
				
				$('#validation-form').validate({
					errorElement: 'div',//使用什么标签标记错误
					errorClass: 'help-block',//指定错误提示的css类名,可以自定义错误提示的样式
					focusInvalid: true,//提交表单后,未通过验证的表单会获得焦点
					//表单验证规则
					rules: {
						remark:{//id
							required: true//必填
						},
						status:{
							required: true,
							number:true
						} 
						
					},
					//自定义的提示信息
					messages: {
						remark:{
							required: "第一项不能为空",
						},
						status:{
							required: "自然不能为空",
							number:"自然必须为整数"
						} 
					},
					//可以给未通过验证的元素加效果,闪烁等
					highlight: function (e) {
						$(e).closest('.form-group').removeClass('has-info').addClass('has-error');
					},
					//要验证的元素通过验证后的动作,
					success: function (e) {
						$(e).closest('.form-group').removeClass('has-error');
						$(e).remove();
					},
					//跟一个函数,可以自定义错误放到哪里
					errorPlacement: function (error, element) {
						if(element.is(':checkbox') || element.is(':radio')) {
							var controls = element.closest('div[class*="col-"]');
							if(controls.find(':checkbox,:radio').length > 1) controls.append(error);
							else error.insertAfter(element.nextAll('.lbl:eq(0)').eq(0));
						}
						else if(element.is('.select2')) {
							error.insertAfter(element.siblings('[class*="select2-container"]:eq(0)'));
						}
						else if(element.is('.chosen-select')) {
							error.insertAfter(element.siblings('[class*="chosen-container"]:eq(0)'));
						}
						else error.insertAfter(element.parent());
					},
					//通过验证后运行的函数,里面要加上表单提交的函数,否则表单不会提交
					submitHandler: function (form) {
						var $form = $("#validation-form");
						var $btn = $("#submit-btn");
						
						//验证是否提交中，还未处理完
						if($btn.hasClass("disabled")) return;
						
						//准备要提交的数据
						var submitData =$form.serializeArray();
					 
						//禁用提交按钮避免重复提交
						$btn.addClass("disabled");
						//开始提交
						$.post("/newstype/savenewstype", submitData,function(data) {
							//放开提交按钮
							$btn.removeClass("disabled");
							//处理返回结果
							if(data.code==0){
								
	        					window.parent.reloadGrid(); //重新载入
	        					layer.msg("保存成功", {
	        					    icon: 1,
	        					    time: 2000 //2秒关闭（如果不配置，默认是3秒）
	        					},function(){
	        						//关闭弹出层
	        						closeView();
	        					});
	        					
	        				}else{
	        					layer.msg(data.msg, {
	        					    icon: 2,
	        					    time: 2000 //2秒关闭（如果不配置，默认是3秒）
	        					},function(){ });
	        					
	        				}
						},"json");
						return false;
					},
					//验证不通过时执行
					invalidHandler: function (form) {
						layer.msg("信息填写有误，再检查一下", {
    					    time: 2000 //2秒关闭（如果不配置，默认是3秒）
    					},function(){ });
					}
				});
			});
			
			//关闭弹出层
			function closeView(){
				var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
				parent.layer.close(index); //再执行关闭 
			}
			
		</script>
</body>
</html>